<template>
  <div class="billing_manager_container">
    <div class="search_container">
      <div class="grey_title_container">
        <span style="margin-right: 6px;" class="text"><i class="el-icon-search"></i></span>
        <span class="text">筛选查询</span>
      </div>
      <div class="search_content form_container">
        <el-row style="display: flex; align-items: center;" :gutter="17">
          <el-col :span="3" class="item">
            <div class="text_container">
              <span class="text">姓名：</span>
            </div>
            <el-input size="mini" v-model="searchOption.searchName"/>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container">
              <span class="text">电话：</span>
            </div>
            <el-input size="mini" v-model="searchOption.searchMobile"/>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container">
              <span class="text">开单类型：</span>
            </div>
            <el-select v-model="searchOption.searchBillingType" placeholder="请选择" size="mini">
              <el-option
                v-for="item in billingTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7" class="item">
            <div class="text_container">
              <span class="text">接待时间：</span>
            </div>
            <el-date-picker
              type="date"
              class="date_no_icon"
              v-model="searchOption.searchFromDate"
              value-format="yyyy-MM-dd"
              size="mini"/>
            <span style="color: #666666;font-size: 11px;margin-left: 7px; margin-right: 7px;">至</span>
            <el-date-picker
              type="date"
              class="date_no_icon"
              v-model="searchOption.searchToDate"
              value-format="yyyy-MM-dd"
              size="mini"/>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container">
              <span class="text">开单状态：</span>
            </div>
            <el-select v-model="searchOption.searchBillingState" placeholder="请选择" size="mini">
              <el-option
                v-for="item in billingStates"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2" class="item">
            <el-button type="primary" size="mini" style="padding-left: 26px; padding-right: 26px;" @click="getBillings">
              查询
            </el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="customer_container">
      <div class="customer_title grey_title_container">
        <div class="left">
          <span class="indicator"></span>
          <span class="text">客户列表</span>
        </div>
        <div class="right">
          <el-button type="primary" plain size="small" @click="openConsumerBilling">消费开单</el-button>
          <el-button type="primary" plain size="small">修改客户资料</el-button>
          <el-button type="primary" plain size="small">交预约金</el-button>
          <el-button type="primary" plain size="small">交储值</el-button>
          <el-button type="primary" plain size="small">交住院押金</el-button>
          <el-button type="primary" plain size="small">开始验单</el-button>
        </div>
      </div>
      <div class="customer_table">
        <el-table
          v-loading="isLoading"
          :data="billings"
          :row-class-name="customerRowClass"
          :border="true">
          <el-table-column
            fixed
            width="35">
            <template slot-scope="scope">
              <el-radio v-model="selectedRowId" :label="scope.row.id"></el-radio>
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            width="60"
            type="index"
            align="center"/>
          <el-table-column
            label="接待时间"
            width="140"
            align="center"
            prop="date">
            <template slot-scope="scope">
              <span class="text">{{formatDate(scope.row.beginConsultTime)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="客户状态"
            align="center">
            <template slot-scope="scope">
              <span class="text">缺少字段</span>
            </template>
          </el-table-column>
          <el-table-column
            label="开单状态"
            align="center">
            <template slot-scope="scope">
              <span class="text">{{getBillingState(scope.row.state)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            align="center"
            width="60"
            prop="cfname"/>
          <el-table-column
            label="性别"
            align="center"
            width="60"
            prop="sex">
            <template slot-scope="scope">
              <span class="text">{{getSex(scope.row.cfsex)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="年龄"
            align="center"
            width="60">
            <template slot-scope="scope">
              <span class="text">缺少字段</span>
            </template>
          </el-table-column>
          <el-table-column
            label="电话"
            align="center"
            width="110"
            prop="mobile"/>
          <el-table-column
            label="新老客户"
            align="center"
            width="80">
            <template slot-scope="scope">
              <span class="text">缺少字段</span>
            </template>
          </el-table-column>
          <el-table-column
            label="客户级别"
            align="center"
            width="80">
            <template slot-scope="scope">
              <span class="text">缺少字段</span>
            </template>
          </el-table-column>
          <el-table-column
            label="科室"
            align="center"
            width="60"
            prop="deptName"/>
          <el-table-column
            label="医生"
            align="center"
            width="60"
            prop="doctorName"/>
          <el-table-column
            label="客户意向"
            align="center"
            width="80"
            prop="pretend">
            <template slot-scope="scope">
              <span class="text">缺少字段</span>
            </template>
          </el-table-column>
          <el-table-column
            label="咨询师"
            align="center"
            width="80">
            <template slot-scope="scope">
              <span class="text">缺少字段</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination" style="text-align: center;">
          <el-pagination
            layout="prev, pager, next"
            @current-change="changePage"
            :page-size="10"
            :total="searchOption.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  @Component
  export default class BillingManage extends Vue {

    isLoading = false;
    billings = [];
    searchOption = {
      searchName: '',
      searchMobile: '',
      searchBillingType: '',
      searchFromDate: '',
      searchToDate: '',
      searchBillingState: '',
      currentPage: 1,
      total: 0
    }
    /**
     * 开单类型
     * @type {*[]}
     */
    billingTypes = [{
      value: '',
      label: '请选择'
    }, {
      value: '1',
      label: '二开开单'
    }, {
      value: '2',
      label: '二开推荐'
    }, {
      value: '3',
      label: '普通开单'
    }]
    /**
     * 开档状态
     * @type {*[]}
     */
    billingStates = [{
      value: '',
      label: '请选择'
    }, {
      value: '0',
      label: '待开单'
    }, {
      value: '1',
      label: '已开单'
    }, {
      value: '2',
      label: '已保存未下单'
    }, {
      value: '3',
      label: '被打回'
    }];
    selectedRowId = '';

    created() {
      this.getBillings();
    }

    customerRowClass({row, rowIndex}) {
      if (row.state === '0') {
        return 'blue-row';
      } else if (row.state === '1') {
        return 'green-row';
      } else if (row.state === '2') {
        return 'red-row';
      }
    }

    formatDate(date) {
      if (date) {
        let momentDate = this.$moment(date);
        return momentDate.format('YYYY-MM-DD HH:mm:ss');
      }
      return '未知';
    }

    getBillingState(state) {
      if (state) {
        if (state === '0') {
          return '待开单';
        } else if (state === '1') {
          return '已开单';
        } else if (state === '2') {
          return '已保存未下单';
        } else if (state === '3') {
          return '被打回';
        }
      }
      return '未知';
    }

    getSex(sex) {
      if (sex) {
        if (sex === 0) {
          return '女';
        } else if (sex === 1) {
          return '男';
        }
      }
      return '未知';
    }

    /**
     * 获取开单列表
     */
    getBillings() {
      this.isLoading = true;
      this.$ajax({
        method: 'get',
        url: '/billing/findTriagePage.do',
        params: {
          currentPage: this.searchOption.currentPage,
          truename: this.searchOption.searchName,
          mp: this.searchOption.searchMobile,
          fromDate: this.searchOption.searchFromDate,
          toDate: this.searchOption.searchToDate,
          state: this.searchOption.searchBillingState,
          fBusiness: this.searchOption.searchBillingType
        }
      }).then(resp => {
        this.isLoading = false;
        if (resp.data.code === 200) {
          this.searchOption.total = resp.data.data.count;
          this.billings = resp.data.data.list;
        } else {
          this.$notify.showWarning('获取数据异常');
        }
      }, error => {
        this.isLoading = false;
        this.$notify.showWarning('获取数据异常');
      });
    }

    /**
     * 点击分页
     * */
    changePage(page) {
      this.searchOption.currentPage = page;
      this.getBillings();
    }

    /**
     * 点击消费开单
     */
    openConsumerBilling() {
      if (!this.selectedRowId) {
        this.$notify.showWarning('请先选择一条记录');
        return;
      }
      this.$router.push({name: 'ConsumerBilling', params: {registerId: this.selectedRowId}});
    }
  }
</script>

<style scoped>
  .billing_manager_container {
    background: #ffffff;
  }

  .search_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .search_container .search_content {
    padding: 15px 10px;
  }

  .customer_title {
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
  }
</style>
